<template>
  <main class="max-width-1350 am-padding-top am-center">

    <!-- 作品列表 -->
    <transition-group name="dg-fade" tag="article" class="am-g">
      <div :class="['am-u-sm-12', 'am-u-md-4', 'am-u-lg-3', {'am-u-end' : (worksData.length - 1) === index}]"
        v-for='(works, index) in worksData' :key="index">
        <section class="am-margin-bottom">
          <div class="dg-panel-bd" style="position:relative;z-index:200">
            <router-link :to="'/worksDetail/' + works.worksID">
              <am-image custom-class="am-center am-radius"
              :responsive="true" v-lazy="thumbnail + works.mainPic" :src="''" alt="" />
            </router-link>
            <div class="dg-blur-img" :style="{'background-image': `url(${ thumbnail + works.mainPic })`}"></div>
          </div>
          <footer class="am-panel-footer">
            <span class="am-link-muted">{{ works.worksName }} by {{ works.designerName }}</span>
          </footer>
        </section>
      </div>
    </transition-group>

    <!-- 滚动加载更多infinite-scroll-immediate-check="false" -->
    <am-container>
      <div class="load-more"
        v-infinite-scroll="loadMore"
        :infinite-scroll-disabled="busy"
        infinite-scroll-distance="10">
        <am-image src="/static/loading-svg/loading-spinning-bubbles.svg" v-show="loading" alt="" />
      </div>
    </am-container>
  </main>
</template>

<script>
export default {
  name: 'works-list',
  data() {
    return {
      busy: false,// 是否启用滚动加载,false为启用
      loading: false,// 是否显示底部加载svg
      worksData: [],// 作品数据
      page: {// 分页数据
        num: 1,
        per: 8,
        res: {
          count: 0,
          total: 0
        }
      }
    }
  },
  computed: {
    /**
     * 筛选面板的条件
     */
    choicesID() {// 获取选中的分类标签
      return this.$parent.$refs.filter.choices.map(item => item.id);
    },
    sorts() {
      return this.$parent.$refs.filter.sortsIndex;
    },

    /**单一状态 */
    gameID() {
      return this.$store.getters.gameID;
    }
  },
  methods: {
    ready() {
      this.loadWorks(false);
    },

    loadWorks(flag = false) {
      this.loading = true;

      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETWORKSLISTBYMPAGE, {
          // mainTagID: this.choicesID.toString(),
          tagID: this.choicesID.toString(),
          gameID: +this.gameID,
          pageNum: +this.page.num,
          numPerPage: +this.page.per
        }).then(res => {
          this.page.res = res.data.data.page;
          if(flag) {// 滚动追加
            this.worksData = this.worksData.concat(
              res.data.data.work
            );
          } else {// 首次加载
            this.worksData = res.data.data.work;
            this.busy = false;
          }
          this.loading = false;
        });
      });
    },

    /**加载更多 */
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page.num = Math.min(this.page.res.count + 1, ++this.page.num);
        if(this.page.num <= this.page.res.count) {
          this.loadWorks(true);
        }
      }, 799);
    },

    /** */
    async goWsDetail(works) {
      await this.$parent.$refs.filter.clearTags();
      this.$route('/worksDetail/' + works.worksID);
    }
  },
  watch: {
    /**筛选条件触发查询 */
    choicesID(val) {
      this.page.num = 1;
      this.loadWorks(false);
    },
    // choices: {
    //   handler(val) {
    //     this.page.num = 1;
    //     this.loadWorks(false);
    //   },
    //   deep: true
    // },
    sorts(val) {
      // this.page.num = 1;
      // this.loadWorks(false);
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
.load-more { height: 70px; line-height: 70px; text-align: center; }
.dg-fade-enter-active, .fade-leave-active { transition: opacity 1.3s ease-in; }
.dg-fade-enter { opacity: 0; }
</style>